<script setup>
// 狗狗训练主题数据
const trainingTopics = [
  {
    id: 1,
    title: '基础服从训练',
    image: 'https://picsum.photos/id/1059/600/400',
    content: `基础服从训练是每只狗狗都应该学习的重要技能，这不仅能让狗狗更好地融入家庭生活，还能确保它们的安全。

**重点训练内容：**

1. **坐下**：这是最基本的命令之一。用食物引导狗狗的鼻子向上，当它们的臀部自然下落时，说出“坐下”命令并给予奖励。

2. **等待**：让狗狗坐下，然后后退几步，伸出手掌说“等待”。如果狗狗保持不动，就给予奖励。逐渐增加等待的时间和距离。

3. **来**：在狗狗不注意时，热情地呼唤它的名字和“来”的命令。当狗狗跑过来时，给予大量的表扬和奖励。

4. **卧下**：让狗狗先坐下，然后用食物引导它的鼻子向下，当它的前腿和胸部着地时，说出“卧下”命令并给予奖励。

5. **安静**：当狗狗吠叫时，用坚定但平静的声音说“安静”。当它停止吠叫时，立即给予奖励和表扬。`
  },
  {
    id: 2,
    title: '幼犬训练指南',
    image: 'https://picsum.photos/id/1062/600/400',
    content: `幼犬时期（8周至6个月）是训练的黄金时期，这段时间内狗狗的学习能力最强，也最容易形成良好的习惯。

**训练要点：**

1. **社交化**：在3-14周龄的关键社交期，让幼犬接触不同的人、动物、环境和声音，帮助它们建立自信和良好的社交技能。

2. **定点排便**：观察幼犬的排便规律，在它们饭后、醒来或玩耍后，立即带它们到指定的排便区域。当它们在正确的地方排便时，给予奖励和表扬。

3. **咬合力控制**：当幼犬咬得太用力时，发出“哎哟”的声音并停止互动，让它们明白用力咬会结束游戏。

4. **基础命令**：从简单的命令开始，如“坐下”、“来”等，使用积极强化的方法，保持训练时间短而有趣。

5. **笼内训练**：让笼子成为幼犬的安全空间，而不是惩罚场所。逐渐增加它们在笼内的时间，确保它们在笼内感到舒适和安全。`
  },
  {
    id: 3,
    title: '行为问题纠正',
    image: 'https://picsum.photos/id/1068/600/400',
    content: `狗狗的一些行为问题可能会让主人感到困扰，但通过正确的训练方法，大多数问题都可以得到纠正。

**常见问题及解决方法：**

1. **过度吠叫**：确定吠叫的原因（无聊、恐惧、警惕等），然后针对原因进行训练。例如，如果狗狗因为无聊而吠叫，可以增加它的运动量和互动时间。

2. **分离焦虑**：逐渐训练狗狗适应独处，开始时离开几分钟，然后逐渐增加时间。提供玩具和舒适的环境，让狗狗在独处时有事可做。

3. **破坏性行为**：确保狗狗有足够的运动和心理刺激，提供适当的咀嚼玩具，并在狗狗表现良好时给予奖励。

4. **扑人**：当狗狗扑人时，转身离开或交叉手臂，不要给予任何关注。当狗狗四只脚都着地时，才给予关注和奖励。

5. ** leash pulling**：当狗狗拉扯牵引绳时，停止前进并等待它放松。只有当牵引绳松弛时，才继续前进。`
  },
  {
    id: 4,
    title: '高级训练技巧',
    image: 'https://picsum.photos/id/1084/600/400',
    content: `一旦狗狗掌握了基础训练，就可以开始尝试一些高级训练技巧，这不仅能进一步提升狗狗的服从性，还能增强你们之间的纽带。

**高级训练内容：**

1. **随行**：训练狗狗在不牵引的情况下也能紧跟在你身边，保持适当的距离。

2. **拾取物品**：教导狗狗识别并拾取特定的物品，如球、玩具或钥匙。

3. **障碍训练**：设置简单的障碍，如跨栏、隧道等，训练狗狗按照指令通过。

4. **停留**：延长“等待”命令的时间和距离，让狗狗能在不同的环境中保持不动。

5. **声音指令**：除了 verbal commands，还可以训练狗狗对特定的声音（如哨声、拍手声）做出反应。`
  }
]

// 训练方法数据
const trainingMethods = [
  {
    id: 1,
    name: '积极强化',
    description: '当狗狗做出正确的行为时，立即给予奖励（食物、表扬或玩具），这是最有效的训练方法之一。',
    icon: 'https://picsum.photos/id/1025/100/100'
  },
  {
    id: 2,
    name: '响片训练',
    description: '使用响片发出独特的声音，标记狗狗的正确行为，然后立即给予奖励，帮助狗狗理解哪些行为是被期望的。',
    icon: 'https://picsum.photos/id/1062/100/100'
  },
  {
    id: 3,
    name: '连续性强化',
    description: '在训练的初始阶段，对狗狗的每一次正确行为都给予奖励，帮助它们快速理解命令。',
    icon: 'https://picsum.photos/id/1029/100/100'
  },
  {
    id: 4,
    name: '间歇性强化',
    description: '当狗狗已经掌握了某个命令后，随机给予奖励，这可以强化狗狗的记忆，使行为更加持久。',
    icon: 'https://picsum.photos/id/1074/100/100'
  }
]
</script>

<template>
  <div class="training-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>狗狗训练指南</h1>
      <p>通过正确的训练方法，培养一只听话、快乐的狗狗伙伴</p>
    </div>
    
    <!-- 训练方法卡片 -->
    <div class="training-methods">
      <h2>有效的训练方法</h2>
      <div class="methods-grid">
        <div v-for="method in trainingMethods" :key="method.id" class="method-card">
          <div class="method-icon">
            <img :src="method.icon" :alt="method.name" />
          </div>
          <h3>{{ method.name }}</h3>
          <p>{{ method.description }}</p>
        </div>
      </div>
    </div>
    
    <!-- 训练主题卡片 -->
    <div class="training-topics">
      <div v-for="topic in trainingTopics" :key="topic.id" class="training-card">
        <div class="training-header">
          <div class="training-image">
            <img :src="topic.image" :alt="topic.title" />
          </div>
          <h2>{{ topic.title }}</h2>
        </div>
        
        <div class="training-content">
          <div v-for="(paragraph, index) in topic.content.split('\n\n')" :key="index" class="content-paragraph">
            <div v-if="paragraph.startsWith('**')" class="content-heading">
              {{ paragraph.replace(/\*/g, '') }}
            </div>
            <div v-else class="content-text">
              {{ paragraph }}
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 训练提示 -->
    <div class="training-tips">
      <h3>训练成功的关键提示</h3>
      <div class="tips-grid">
        <div class="tip-card">
          <div class="tip-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
          </div>
          <h4>保持耐心</h4>
          <p>训练需要时间和耐心，每只狗狗的学习速度都不同，不要急于求成。</p>
        </div>
        
        <div class="tip-card">
          <div class="tip-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
          </div>
          <h4>保持一致</h4>
          <p>所有家庭成员都应该使用相同的命令和训练方法，避免让狗狗感到混淆。</p>
        </div>
        
        <div class="tip-card">
          <div class="tip-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
          </div>
          <h4>短时间多次训练</h4>
          <p>每次训练时间保持在10-15分钟，但每天可以进行多次训练，这样效果更好。</p>
        </div>
        
        <div class="tip-card">
          <div class="tip-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
          </div>
          <h4>使用积极强化</h4>
          <p>奖励正确的行为，而不是惩罚错误的行为，这样狗狗会更愿意学习和配合。</p>
        </div>
        
        <div class="tip-card">
          <div class="tip-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
          </div>
          <h4>保持积极态度</h4>
          <p>训练时保持愉快的心情，你的态度会影响狗狗的学习积极性。</p>
        </div>
        
        <div class="tip-card">
          <div class="tip-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
          </div>
          <h4>适应个体差异</h4>
          <p>根据狗狗的年龄、品种、性格和健康状况，调整训练方法和进度。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 全局样式变量 */
:root {
  --primary-color: #ff7f00;
  --primary-hover: #e66f00;
  --text-primary: #333;
  --text-secondary: #666;
  --text-light: #999;
  --background-light: #f5f5f5;
  --white: #ffffff;
  --border-color: #e0e0e0;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
  --radius: 8px;
  --transition: all 0.3s ease;
}

/* 页面整体样式 */
.training-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.page-header p {
  font-size: 18px;
  color: var(--text-secondary);
  margin: 0;
}

/* 训练方法卡片 */
.training-methods {
  margin-bottom: 40px;
}

.training-methods h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 24px 0;
  text-align: center;
}

.methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.method-card {
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  text-align: center;
  transition: var(--transition);
}

.method-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.method-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 16px;
}

.method-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.method-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.method-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* 训练主题卡片 */
.training-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.training-card {
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: var(--transition);
}

.training-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

/* 训练头部 */
.training-header {
  position: relative;
}

.training-image {
  height: 240px;
  overflow: hidden;
}

.training-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.training-card:hover .training-image img {
  transform: scale(1.05);
}

.training-header h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: var(--white);
  padding: 30px 24px 20px;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

/* 训练内容 */
.training-content {
  padding: 24px;
}

.content-paragraph {
  margin: 0 0 20px 0;
}

.content-paragraph:last-child {
  margin-bottom: 0;
}

.content-heading {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-color);
  margin: 0 0 12px 0;
}

.content-text {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 训练提示 */
.training-tips {
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}

.training-tips h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 24px 0;
  text-align: center;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.tip-card {
  background-color: var(--background-light);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}

.tip-icon {
  width: 60px;
  height: 60px;
  background-color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  margin: 0 auto 16px;
}

.tip-card h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.tip-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .training-topics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 28px;
  }
  
  .page-header p {
    font-size: 16px;
  }
  
  .training-methods h2 {
    font-size: 20px;
  }
  
  .training-image {
    height: 200px;
  }
  
  .training-header h2 {
    font-size: 20px;
    padding: 24px 20px 16px;
  }
  
  .training-tips {
    padding: 24px;
  }
  
  .training-tips h3 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .training-page {
    padding: 16px;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
  
  .training-content {
    padding: 20px;
  }
  
  .methods-grid,
  .tips-grid {
    grid-template-columns: 1fr;
  }
}
</style>